<script setup>
import DingLan from "./DingLan.vue"
import DiLan from "./DiLan.vue";
import ColLeft from "./ColLeft.vue";
import ColRight from "./ColRight.vue";
</script>

<template>
  <DingLan />

  <div class="container">
    <!-- 主模块 -->
    <div class="main-col" id="main-col">
      <router-view></router-view>
    </div>
    <ColLeft />
    <ColRight />
  </div>

  <DiLan />
  <!-- 回顶按钮 -->
  <el-backtop :right="50" :bottom="50" />
</template>

<style scoped lang="less">
/* 大框架 */
.container {
  display: flex;
  // justify-content: space-between;
  // border: 1px solid red;
  width: 70%;
  margin: 0px auto;
  margin-top: 20px;
  transition: 0.5s;

  .main-col {
    order: 2;
    flex-grow: 1;
    // flex: 1;
    width: 0px; // 必须加，让flex接管
  }

}

/* 一档，最大，电脑屏幕的大屏幕设备，显示所有信息 */
@media screen and (max-width: 1300px) {
  .container {
    width: 95%;
  }
}

/* 三档，最小，用于手机，左右栏全部隐藏，中间栏最大，顶栏折叠 */
@media screen and (max-width: 600px) {
  .container {
    width: 98%;
  }
}
</style>